<script lang="ts" setup>
import { useSystemStore } from '@/stores/system'

const systemStore = useSystemStore()
const { img, imgHeight } = defineProps({
  img: {
    type: String,
    default: ''
  },
  imgHeight: {
    type: Number,
    default: 520
  }
})
</script>

<template>
  <div class="relative">
    <el-container
      :style="{
        height: `${imgHeight}px`,
        backgroundImage: `url(${img !== '' ? img : systemStore.getRandomImg()})`
      }"
      class="sticky top-0 max-md:h-96 z-0 bg-no-repeat bg-cover bg-center items-center justify-center"
    >
      <slot name="title" />
    </el-container>
    <el-container class="size-full -mt-28" direction="vertical">
      <Wave />
      <div class="use-theme use-transitions-colors relative pt-5">
        <slot name="default" />
      </div>
    </el-container>
  </div>
</template>
<style lang="scss" scoped></style>
